<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录页面</title>
    <link rel="stylesheet" href="../css/userLogin.css">
</head>

<body>
    <form action="/login" method="get">
        <input type="text" placeholder="请输入用户名" id="uname">
        <input type="text" placeholder="请输入密码" id="upwd">
        <input type="button" value="登录" id="btn">
    </form>
    <script>
        //点击提交事件
       btn.onclick = function () {
            // 获取用户传递的参数
            var u = uname.value
            var pwd = upwd.value
            // 判断用户名和密码是否填写
            if (!u) {
                res.send({ code: 401, msg: '用户名不能为空' })
                return
            }
            if (!pwd) {
                res.send({ code: 401, msg: '密码不能为空' })
                return
            }
            //    httt协议中不允许出现中文，需要对请求主体进行编码
            u = encodeURI(u)
            // AJAX四部曲
            // AJAX请求的url
            let url = `/v1/users/login?uname=` + u + `&upwd=` + pwd
            let xhr = new XMLHttpRequest()
            // 登录请求的方式是get
            xhr.open('GET', url)
            xhr.onload = function () {
                // 将后台传来的数据转为JSON对象形式
                var result =JSON.parse(xhr.responseText) 
                // 打印结果验证
                // console.log(result);
                // 将结果以弹窗形式发送
                alert((result.msg))
                // 实现从登录页面跳转到首页
                window.location.href = './indexOf.html';

            }
            xhr.send()
        }
    </script>
</body>

</html>